<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>电子表</title>
    <style>
        .big{
            /*border:.5px solid;*/
            width:504px;
            background-color:rgba(99,00,00,.8);
            background-image:url(./1.jpg);
            /*background-opacity:0.5;*/
            height:800px;
            margin:0px auto;
             position:absolute;
             top:116px; /*116*/
             left:1391px;
            display:none;         
        }
        .line1{
            float:left;
        }
        .time,.week{
            border:1px solid white;
            width:250px;
            height:100px;
        }
        .div0{
            /*border:1px solid;   */
            width:70px;
            height:50px;
            float:left;
            margin-top:10px;
            font-size:24px;
            font-weight:bold;
            padding-top:18px;
            padding-left:10px;
            color:white;
        }
        #div4{
            margin-left:60px;

            width:100px;
            height:50px;

        }
        #dayM{
            /*border:1px solid;*/
            width:500px;
            height:100px;
            /*padding-left:10px;*/
        }
        .div00{
            float:left;
            /*border:1px solid;*/
            width:57px;
            height:57px;
            margin-left:13px;
            /*margin:20px auto;*/
            color:white;
        }
        .day{
            float:left;
            border:1px solid white;
            width:34px;
            height:38px;
            padding-left:22px;
            padding-top:12px;
            margin-left:11px;
            margin-top:10px;
            font-size:18px;
            color:white;


        }
        .day:hover{
            box-shadow:0px 3px 3px #e8e8e8;

            cursor:pointer;
            background-color:#e8e8e8;
            transition:all 0.3s;
            transform:translateY(-3px);
        }

    </style>
</head>
<body>
    <h1 >电子表</h1>
    <button onclick="func(this)">时间</button>
    <hr>
     <div class="big" id="big">
         <div class="time line1" id="time">
            <div id="div1" class="div0"></div>
            <div id="div2" class="div0"></div>
            <div id="div3" class="div0"></div>
             
         </div>
         <div class="week line1">
            <div id="div4" class="div0"></div>
             
         </div>
         <div id="dayM" class="div0">
             <div class="div10 div00">日</div>
             <div class="div11 div00">一</div>
             <div class="div12 div00">二</div>
             <div class="div13 div00">三</div>
             <div class="div14 div00">四</div>
             <div class="div15 div00">五</div>
             <div class="div16 div00">六</div>
         </div>
         <div id="day" class="">

                <div class="day" id="dayd"></div>


         </div>
     </div>
    <script>
        // console.log(date);
            // 将当月日期存于数组 日后配合php 还是可以的
        var day = new Array('',1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31);
            // console.log(document.getElementById('day').innerHTML);
        var time = document.getElementById('time');
            // 定义变量 conse 为空 为了 拼等下面的day模型
        var conse = "";
            // 将所有日期遍历到html中
         for(var i = 0; i<day.length; i++){
            document.getElementById('dayd');
            // console.log(document.getElementById('day').innerHTML);
            conse += `<div class="day" id="dayd${day[i]}" >${day[i]}</div>`;
         }
         document.getElementById('day').innerHTML = conse;
            // console.log(conse);
        // document.getElementById('time').innerHTML = date.toLocaleString();
        function demo(){
        var date = new Date();
            // 设定时间
        if (date.getHours()<=9) {
        document.getElementById('div1').innerHTML ='0' + date.getHours() +'时';
            
        }else{

        document.getElementById('div1').innerHTML = date.getHours() +'时';
        }
        if(date.getMinutes()<=9){
        document.getElementById('div2').innerHTML ='0' + date.getMinutes() +'分';
            
        }else{

        document.getElementById('div2').innerHTML = date.getMinutes() +'分';
        }
        if (date.getSeconds()<=9) {

         document.getElementById('div3').innerHTML = '0' + date.getSeconds() + '秒'; 
        }else{

         document.getElementById('div3').innerHTML = date.getSeconds() + '秒'; 
        }
         var week  = date.getDay();
         // console.log(week);
         // 设定星期
         switch(week){
            case 1: week="一";break;
            case 2: week="二";break;
            case 3: week="三";break;
            case 4: week="四";break;
            case 5: week="五";break;
            case 6: week="六";break;
            case 7: week="日";break;
         }
            var nday = date.getDate();
            // console.log(nday);
            var parm = 'dayd'+ nday;
        // console.log(parm);
        document.getElementById(parm).style.backgroundColor = 'red';

         document.getElementById('div4').innerHTML = '星期'+ week;


        }
         // 按每秒刷新 之后还得清除 为了实现页面秒数滚动
        setInterval(demo,1000);

        var big = document.getElementById('big');
        var info = 0;
        function func(en){
            info++;
            var en = en||window.event;
            // console.log(en);
            big.style.display = 'block';
            en.innerHTML = "收起";
            if(info%2 == 0){
            big.style.display = 'none';
            en.innerHTML = "时间";               
            }

           
            
            console.log(big.style.transform);
        }


        

          </script>

</body>
</html>